<template>
  <div class="container" v-loading="isloading">
    <div>
      <div class="content-header">
        <ul class="cityselect" v-if="iscityshow">
          <li
            v-for="(item, i) in citylist"
            :key="i"
            :class="{ active: i == currentLiIndex, disable: cityDisable[i] }"
            @click="liChange(i)"
          >
            {{ item.label }}
          </li>
        </ul>
        <ul class="cityselect bggray" v-if="isareashow">
          <li
            v-for="(item, i) in arealist"
            :key="i"
            @click="areaChange(i)"
            :class="{
              areaActive: i == currentareaindex,
              disable: countryDisable[i],
            }"
          >
            {{ item.label }}
          </li>
        </ul>
      </div>
      <div class="mediumdiv">
        <el-row class="jieduan">
          <el-col class="jieduan-col" :sm="12" :md="8" :lg="6" :xl="4"
            ><div style="background-color: #63b8ff">
              <i class="iconfont icon-jishufuwu"></i><span>准备工作</span
              ><span class="num">{{ obj.stageone }}</span
              ><span>个</span>
            </div></el-col
          >
          <el-col class="jieduan-col" :sm="12" :md="8" :lg="6" :xl="4"
            ><div style="background-color: #eead0e">
              <i class="iconfont icon-tiaochawenjuan"></i>
              <span>基础调查</span><span class="num">{{ obj.stagetwo }}</span
              ><span>个</span>
            </div>
          </el-col>
          <el-col class="jieduan-col" :sm="12" :md="8" :lg="6" :xl="4"
            ><div style="background-color: #bcee68">
              <i class="iconfont icon-yijianxiang"></i>
              <span>编制方案</span><span class="num">{{ obj.stagethree }}</span
              ><span>个</span>
            </div></el-col
          >
          <el-col class="jieduan-col" :sm="12" :md="8" :lg="6" :xl="4"
            ><div style="background-color: #bcee68">
              <i class="iconfont icon-guihua"></i>
              <span>咨询论证</span><span class="num">{{ obj.stagefour }}</span
              ><span>个</span>
            </div></el-col
          >
          <el-col class="jieduan-col" :sm="12" :md="8" :lg="6" :xl="4"
            ><div style="background-color: #d8bfd8">
              <i class="iconfont icon-shenpi"></i>
              <span>审查审核</span><span class="num">{{ obj.stagefive }}</span
              ><span>个</span>
            </div></el-col
          >

          <el-col class="jieduan-col" :sm="12" :md="8" :lg="6" :xl="4"
            ><div style="background-color: #cd9b9b">
              <i class="iconfont icon-shenpi"></i>
              <span>审批公告</span><span class="num">{{ obj.stagesix }}</span
              ><span>个</span>
            </div></el-col
          >
        </el-row>
        <div class="footdiv">
          <el-row>
            <el-col :sm="24" :md="24" :lg="24" :xl="24">
              <el-row>
                <el-col :sm="12" :md="14" :lg="14" :xl="12">
                  <div class="chart-right-bottom">
                    <div class="message-header">
                      <div>
                        <i class="icon iconfont icon-notice"></i
                        ><span>通知</span>
                      </div>
                      <a href="" v-if="messagelist.length > 0" @click="allnoisy"
                        ><span
                          v-if="
                            role == '自然资源厅用户' || role == '超级管理员'
                          "
                          >查看更多<i class="el-icon-d-arrow-right"></i></span
                      ></a>
                    </div>
                    <ul class="lefttopul" v-if="messagelist.length > 0">
                      <li
                        v-for="(item, index) in messagelist"
                        :key="index"
                        @click="openfujian(item)"
                      >
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="item.title"
                          placement="top"
                        >
                          <div class="listleft">
                            <i class="el-icon-message"></i
                            ><span class="message">{{
                              item.title | ellipsis
                            }}</span>
                          </div>
                        </el-tooltip>
                        <span class="date">{{ item.createTime }}</span>
                      </li>
                    </ul>
                    <ul class="nomessagebox" v-else>
                      🙁暂无通知~
                    </ul>
                  </div>
                </el-col>
                <el-col :sm="12" :md="10" :lg="10" :xl="12">
                  <div class="left-box" >
                    <village-box ref="chart3" />
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <!-- <el-col :sm="24" :md="24" :lg="24" :xl="12">
              <el-row>
                <el-col :sm="24" :md="12" :lg="12" :xl="12">
                  <div class="left-box" v-show="false">
                    <percent-box ref="chart2" />
                  </div>
                </el-col>
              </el-row>
            </el-col> -->
            <el-col :sm="24" :md="24" :lg="24" :xl="24">
              <el-row>
                <el-col :sm="12" :md="12" :lg="12" :xl="12">
                  <div class="left-box">
                    <zcyt-bar ref="chart5" />
                  </div>
                </el-col>
                <el-col :sm="12" :md="12" :lg="12" :xl="12">
                  <div class="left-box">
                    <percent-bar ref="chart6" />
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!-- <div class="map-left">
            <div class="chart-right-top" v-show="false">
              <div class="message-header">
                <div>
                  <i class="iconfont icon-tongji"></i
                  ><span>行政区统计操作图</span>
                </div>
              </div>
              <div class="chart-right-map">
              
                <c-map
                  class="chart"
                  ref="cMap"
                  @changeCity="changeCity"
                  :cityname="city"
                  :countryname="country"
                />
              </div>
            </div>

            <div class="map-left-bottom" v-if="false">
              <div class="message-header">
                <div>
                  <i class="iconfont icon-yujing"></i
                  ><span>村庄规划预警数量</span>
                </div>
                <a href="" @click="queryxiangqing"
                  ><span>查看详情<i class="el-icon-d-arrow-right"></i></span
                ></a>
              </div>
              <div class="chartbox">
                <warn-box ref="chart1" />
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import cMap from "@/components/map";
import warnBox from "@/components/chart1";
import percentBox from "@/components/chart2";
import villageBox from "@/components/chart3";
// import zcytBox from "@/components/chart4";
import zcytBar from "@/components/chart5";
import percentBar from "@/components/chart6";
import { sydata } from "@/api/index.js";
import { getlist, getoperationcondition } from "@/api/notice.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      arealist: [],
      pageSize: 5,
      messagelist: [
        {
          message: "关于认真制定全面完成村庄规划分类编制方案的通知",
          date: "2013-7-28",
        },
      ],
      currentLiIndex: 0,
      currentareaindex: 0,
      isareashow: false,
      datalist: [],
      isloading: false,
      city: "湖南省",
      country: "",
      obj: {},
      role: "",
      iscityshow: true,
      nowuserarea: "",
      cityDisable: [],
      countryDisable: [],
    };
  },
  computed: {
    ...mapGetters(["citylist", "user"]),
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 20) {
        return value.slice(0, 20) + "...";
      }
      return value;
    },
  },
  components: {
    cMap,
    warnBox,
    percentBox,
    villageBox,
    zcytBar,
    percentBar,
  },
  beforeMount() {
    if (this.user.roles[0].name == "编制单位用户") {
      this.$router.push("/home2/index");
    }
  },
  mounted() {
    this.role = this.user.roles[0].name;
    this.nowuserarea = this.user.area;
    this.getmessage();

    this.citylist.forEach((element, i) => {
      this.cityDisable[i] = false;
      this.countryDisable[i] = false;
    });

    if (this.nowuserarea == "") {
      this.iscityshow = true;
      this.getChartvalue(null, null);
    } else {
      // this.iscityshow = false;
      this.isareashow = true;
      let list = this.nowuserarea.split("-");
      this.city = list[0];
      this.citylist.forEach((element, i) => {
        if (element.label == this.city) {
          this.currentLiIndex = i;
        } else {
          this.cityDisable[i] = true;
        }
      });
      this.createAreaList();
      if (list.length > 1) {
        this.country = list[1];
        this.arealist.forEach((element, i) => {
          if (element.label == this.country) {
            this.currentareaindex = i;
          } else {
            this.countryDisable[i] = true;
          }
        });
        this.getChartvalue(this.city, this.country);
      } else {
        this.arealist.forEach((element, i) => {
          if (element.label == this.country) {
            this.currentareaindex = i;
          }
        });
        this.getChartvalue(this.city, null);
      }
    }
  },
  methods: {
    async getmessage() {
      let query = {
        currentPage: 1,
        pageSize: 10,
      };
      let res = await getlist(query);
      this.messagelist = res.data.content;
    },
    openfujian(data) {
      this.$router.push({ path: "/message/messagebox", query: { ...data } });
    },

    liChange(index) {
      if (this.cityDisable[index]) {
        return;
      }
      this.currentLiIndex = index;
      this.currentareaindex = 0;
      this.city = this.citylist[this.currentLiIndex].label;
      if (index == 0) {
        this.city = null;
        this.isareashow = false;
      } else {
        this.isareashow = true;
        this.createAreaList();
      }
      this.getChartvalue(this.city, null);
    },
    allnoisy() {
      this.$router.push("/allnoisy/allnoisypage");
    },
    queryxiangqing() {
      this.$router.push("/areawarning/index");
    },
    areaChange(i) {
      if (this.countryDisable[i]) {
        return;
      }
      this.currentareaindex = i;
      this.country = this.arealist[i].label;
      this.city = this.citylist[this.currentLiIndex].label;
      if (i == 0) {
        this.getChartvalue(this.city, null);
      } else {
        this.getChartvalue(this.city, this.country);
      }
    },
    async getChartvalue(a, b) {
      this.isloading = true;
      let res = await sydata(a, b);
      this.obj = res.top;

      // let total = 0;
      // let list = res.data.map((v) => {
      //   total += v.total;
      //   return {
      //     name: v.name,
      //     value: v.total,
      //   };
      // });
      // if (b) {
      //   this.$refs.cMap.changeMap(b, [
      //     {
      //       name: b,
      //       value: total,
      //     },
      //   ]);
      // } else if (!a && !b) {
      //   this.$refs.cMap.changeMap("湖南省", list);
      // } else {
      //   this.$refs.cMap.changeMap(a, list);
      // }

      // let namelist = [];
      // let datalist = [];
      // let countlist = [];
      // res.data.forEach((element) => {
      //   namelist.push(element.name);
      //   datalist.push(element.warningnum);
      //   countlist.push(element.agree);
      // });
      // this.$refs.chart1.changeMap(namelist, datalist);

      // this.$refs.chart2.changeMap(res.pa);
      this.$refs.chart3.changeMap(res.pt);
      // this.$refs.chart4.changeMap(res.pz);
      let zcnamelist = [
        "组织准备",
        "技术准备",
        "基础调研",
        "编制方案",
        "咨询论证",
        "审查审议",
        "规划公示",
        "成果审批",
        "规划公告",
      ];
      let namelist = [
        "准备工作",
        "基础调查",
        "编制方案",
        "咨询论证",
        "审查审核",
        "审批公告",
        "全部完成",
      ];

      this.$refs.chart5.changeMap(zcnamelist, res.pz, res.top.zctotal);
      this.$refs.chart6.changeMap(namelist, res.pa, res.top.total);
      this.isloading = false;
    },
    createAreaList() {
      let children = this.citylist[this.currentLiIndex];

      if (children) {
        this.arealist = children.children.concat([]);
        let labelvalue = { label: children.label };
        this.arealist.unshift(labelvalue);
      }
    },
    changeCity(name) {
      let result = {};
      let findCity = (l, m) => {
        l.map((n, i) => {
          if (n && n.label && n.label == name) {
            result.root = n;
            result.root.index = i;
            result.parent = m;
          }
          if (n && n.children) {
            findCity(n.children, n);
          }
        });
      };
      findCity(this.citylist);
      if (result.parent) {
        this.currentareaindex = result.root.index + 1;
        this.currentLiIndex = result.parent.index;
        this.city = this.citylist[this.currentLiIndex];
        this.createAreaList();
        this.country = this.arealist[this.currentareaindex];
        this.getChartvalue(this.city.label, this.country.label);
      } else {
        this.currentLiIndex = result.root.index;
        this.currentareaindex = 0;
        this.city = this.citylist[this.currentLiIndex];
        this.isareashow = true;
        this.createAreaList();
        this.getChartvalue(this.city.label, null);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.nomessagebox {
  text-align: center;
  padding-top: 40px !important;
}
.elheader {
  width: 100%;
  height: 40px !important;
  padding: 0;
  padding-left: 10px;
  background-color: #f3f3f8;
  .eltag {
    height: 40px;
    line-height: 40px;
    background-color: #fff;
  }
}

.message-header {
  color: #4778c7;
  line-height: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: 20px;
  background-image: linear-gradient(to right, rgba(220, 220, 220, 0.5), #fff);
  i {
    margin-right: 10px;
  }
  span {
    font-weight: 600;
    font-weight: 18px;
    letter-spacing: 2px;
  }
}
.left-top {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
}

.jieduan-col {
  div {
    margin: 10px;
    padding: 15px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    font-size: 15px;
    color: #fff;
    i {
      font-size: 35px;
      margin-right: 5px;
    }
    .num {
      font-size: 20px;
      color: black;
      margin: 0px 5px;
    }
  }
}
.disable {
  color: #ccc !important;
  cursor: no-drop !important;
}
.content-header {
  position: relative;
  padding: 10px;

  .cityselect {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    li {
      text-align: center;
      margin-right: 10px;
      font-weight: 400;
      font-size: 14px;
      line-height: 35px;
      cursor: pointer;
    }

    .active {
      border-bottom: 3px solid black;
      font-weight: 500;
    }
    .areaActive {
      background-color: #4778c7;
      color: #fff;
      border-radius: 5px;
      padding: 0 10px;
    }
  }
  .bggray {
    padding: 0;
    background-color: #f3f3f8;
    font-size: 12px;
    margin-top: 5px;
    color: #4778c7;
    padding-left: 10px;
  }
}
.left-box {
  height: 359.5px;
}
.mediumdiv {
  // width: 1615px;
  // height: 719px;
  position: relative;

  .footdiv {
    position: relative;
    height: 100%;
    width: 100%;
    // display: flex;
    // justify-content: space-between;

    .map-left {
      width: 100%;
      height: 359.5px;
      // margin-left: 10px;
      position: relative;

      .map-left-bottom {
        width: 100%;
        height: 359.5px;
        .chartbox {
          height: 359.5px;
        }
      }
    }

    // margin-right: 10px;
    position: relative;
    .map-left-top {
      height: 359.5px;
      width: 100%;
    }
    .chart-right-bottom {
      height: 359.5px;
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
        height: calc(100% - 45px);
        li {
          line-height: 35px;
          padding: 0px 20px;
          border-bottom: 1px dashed #ccc;
          letter-spacing: 1px;
          display: flex;
          align-items: center;
          cursor: pointer;
          justify-content: space-between;
          .listleft {
            display: flex;
            align-items: center;
          }
          .message {
            font-weight: 300;
          }
          &:hover {
            .message {
              color: #4778c7;
              font-weight: 700;
            }
            i {
              color: #4778c7;
            }
          }
          i {
            margin-right: 10px;
            font-size: 20px;
            font-weight: 600;
          }
          .date {
            margin-left: 10px;
            color: #4778c7;
          }
        }
      }
    }
    .chart-title {
      padding-bottom: 5px;
      border-bottom: 1px dashed #4778c7;
      border-left: 3px solid #4778c7;
      padding-left: 10px;
      font-size: 14px;
      letter-spacing: 1px;
    }
  }
}
</style>